<template>
  <div class="container mx-auto">
    <!-- 页面标题和操作按钮 -->
    <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between">
      <div>

        <p class="text-gray-500 mt-1">管理所有参与碳积分交易的厂商信息</p>
      </div>
      <button
          class="mt-4 sm:mt-0 px-4 py-2 bg-emerald-600 text-white rounded-md hover:bg-emerald-700 transition-colors flex items-center"
          @click="openAddCompanyModal"
      >
        <i class="fa fa-plus mr-2"></i> 新增厂商
      </button>
    </div>

    <!-- 筛选和搜索 -->
    <div class="bg-white rounded-lg shadow p-6 mb-6">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">行业类型</label>
          <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500">
            <option value="">全部行业</option>
            <option value="能源">能源</option>
            <option value="制造业">制造业</option>
            <option value="化工">化工</option>
            <option value="建材">建材</option>
            <option value="农业">农业</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
          <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500">
            <option value="">全部状态</option>
            <option value="active">活跃</option>
            <option value="inactive">已停用</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">搜索厂商</label>
          <div class="relative">
            <input
                type="text"
                placeholder="输入厂商名称..."
                class="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                v-model="searchKeyword"
                @input="filterCompanies"
            >
            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 厂商列表 -->
    <div class="bg-white rounded-lg shadow mb-6">
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
          <tr>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">厂商名称</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">行业类型</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">地址</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">可用碳积分</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">积分单价(¥)</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">注册日期</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
          </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
          <tr v-for="(company, index) in filteredCompanies" :key="company.id" class="hover:bg-gray-50 transition-colors">
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="h-10 w-10 flex-shrink-0">
                  <img class="h-10 w-10 rounded-full" :src="company.logo" :alt="company.name">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900">{{ company.name }}</div>
                  <div class="text-sm text-gray-500">{{ company.contactPerson }}</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900">{{ company.industry }}</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900">{{ company.address }}</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900">{{ company.credits }}</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900">{{ company.price.toFixed(2) }}</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
              {{ company.regDate }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
                <span
                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
                    :class="company.active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'"
                >
                  {{ company.active ? '活跃' : '已停用' }}
                </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <button class="text-emerald-600 hover:text-emerald-900 mr-3" @click="openEditCompanyModal(company)">编辑</button>
              <button class="text-amber-600 hover:text-amber-900 mr-3" @click="viewCompanyDetails(company)">详情</button>
              <button class="text-red-600 hover:text-red-900" @click="toggleCompanyStatus(index)">
                {{ company.active ? '停用' : '启用' }}
              </button>
            </td>
          </tr>
          <tr v-if="filteredCompanies.length === 0">
            <td colspan="8" class="px-6 py-10 text-center text-gray-500">
              <i class="fa fa-search fa-2x mb-2"></i>
              <p>未找到匹配的厂商信息</p>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页 -->
      <div class="px-6 py-4 border-t border-gray-200 bg-gray-50 flex items-center justify-between">
        <div class="text-sm text-gray-700">
          显示 <span class="font-medium">1</span> 到 <span class="font-medium">{{ Math.min(10, filteredCompanies.length) }}</span> 条，共 <span class="font-medium">{{ filteredCompanies.length }}</span> 条
        </div>
        <div class="flex space-x-2">
          <button class="px-3 py-1 border border-gray-300 rounded-md text-sm text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50" disabled>上一页</button>
          <button class="px-3 py-1 border border-gray-300 rounded-md text-sm text-white bg-emerald-600 hover:bg-emerald-700">1</button>
          <button class="px-3 py-1 border border-gray-300 rounded-md text-sm text-gray-700 bg-white hover:bg-gray-50">2</button>
          <button class="px-3 py-1 border border-gray-300 rounded-md text-sm text-gray-700 bg-white hover:bg-gray-50">3</button>
          <button class="px-3 py-1 border border-gray-300 rounded-md text-sm text-gray-700 bg-white hover:bg-gray-50">下一页</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 新增/编辑厂商弹窗 -->
  <div v-if="showCompanyModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl p-6 transform transition-all max-h-[90vh] overflow-y-auto">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold text-gray-800">{{ isEditing ? '编辑厂商' : '新增厂商' }}</h3>
        <button @click="closeCompanyModal" class="text-gray-400 hover:text-gray-500">
          <i class="fa fa-times"></i>
        </button>
      </div>

      <form @submit.prevent="saveCompany">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">厂商名称 <span class="text-red-500">*</span></label>
            <input
                type="text"
                v-model="currentCompany.name"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                required
            >
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">行业类型 <span class="text-red-500">*</span></label>
            <select
                v-model="currentCompany.industry"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                required
            >
              <option value="">请选择行业</option>
              <option value="能源">能源</option>
              <option value="制造业">制造业</option>
              <option value="化工">化工</option>
              <option value="建材">建材</option>
              <option value="农业">农业</option>
            </select>
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">联系人 <span class="text-red-500">*</span></label>
            <input
                type="text"
                v-model="currentCompany.contactPerson"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                required
            >
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">联系电话 <span class="text-red-500">*</span></label>
            <input
                type="tel"
                v-model="currentCompany.phone"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                required
            >
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
            <input
                type="email"
                v-model="currentCompany.email"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
            >
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">积分单价(¥) <span class="text-red-500">*</span></label>
            <input
                type="number"
                step="0.01"
                min="0"
                v-model="currentCompany.price"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                required
            >
          </div>

          <div class="md:col-span-2">
            <label class="block text-sm font-medium text-gray-700 mb-1">地址</label>
            <input
                type="text"
                v-model="currentCompany.address"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
            >
          </div>

          <div class="md:col-span-2">
            <label class="block text-sm font-medium text-gray-700 mb-1">厂商简介</label>
            <textarea
                v-model="currentCompany.description"
                rows="3"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
            ></textarea>
          </div>

          <div class="md:col-span-2">
            <label class="flex items-center">
              <input
                  type="checkbox"
                  v-model="currentCompany.active"
                  class="rounded border-gray-300 text-emerald-600 shadow-sm focus:border-emerald-300 focus:ring focus:ring-emerald-200 focus:ring-opacity-50"
              >
              <span class="ml-2 text-sm text-gray-700">启用该厂商</span>
            </label>
          </div>
        </div>

        <div class="flex justify-end space-x-3">
          <button type="button" @click="closeCompanyModal" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">取消</button>
          <button type="submit" class="px-4 py-2 bg-emerald-600 text-white rounded-md hover:bg-emerald-700">保存</button>
        </div>
      </form>
    </div>
  </div>

  <!-- 厂商详情弹窗 -->
  <div v-if="showCompanyDetailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl p-6 transform transition-all">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold text-gray-800">厂商详情</h3>
        <button @click="showCompanyDetailModal = false" class="text-gray-400 hover:text-gray-500">
          <i class="fa fa-times"></i>
        </button>
      </div>

      <div class="flex flex-col md:flex-row items-center md:items-start mb-6">
        <img :src="selectedCompany.logo" :alt="selectedCompany.name" class="w-24 h-24 rounded-full mb-4 md:mb-0 md:mr-6">
        <div>
          <h4 class="text-xl font-bold text-gray-800">{{ selectedCompany.name }}</h4>
          <p class="text-gray-500 mt-1">{{ selectedCompany.industry }} | {{ selectedCompany.active ? '活跃' : '已停用' }}</p>
          <div class="mt-3 flex flex-wrap gap-3">
            <div class="flex items-center">
              <i class="fa fa-map-marker text-gray-400 mr-2"></i>
              <span class="text-sm text-gray-600">{{ selectedCompany.address }}</span>
            </div>
            <div class="flex items-center">
              <i class="fa fa-phone text-gray-400 mr-2"></i>
              <span class="text-sm text-gray-600">{{ selectedCompany.phone }}</span>
            </div>
            <div class="flex items-center">
              <i class="fa fa-envelope text-gray-400 mr-2"></i>
              <span class="text-sm text-gray-600">{{ selectedCompany.email }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="border-t border-gray-200 pt-4">
        <h5 class="font-medium text-gray-800 mb-2">厂商简介</h5>
        <p class="text-gray-600 text-sm mb-4">{{ selectedCompany.description || '暂无简介' }}</p>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
          <div class="bg-gray-50 p-3 rounded-lg">
            <p class="text-sm text-gray-500">可用碳积分</p>
            <p class="text-xl font-bold text-gray-800 mt-1">{{ selectedCompany.credits }}</p>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <p class="text-sm text-gray-500">积分单价</p>
            <p class="text-xl font-bold text-gray-800 mt-1">¥{{ selectedCompany.price.toFixed(2) }}</p>
          </div>
          <div class="bg-gray-50 p-3 rounded-lg">
            <p class="text-sm text-gray-500">注册日期</p>
            <p class="text-xl font-bold text-gray-800 mt-1">{{ selectedCompany.regDate }}</p>
          </div>
        </div>

        <h5 class="font-medium text-gray-800 mb-2">最近交易记录</h5>
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-200 text-sm">
            <thead>
            <tr>
              <th class="px-3 py-2 text-left">交易ID</th>
              <th class="px-3 py-2 text-left">对手方</th>
              <th class="px-3 py-2 text-left">数量</th>
              <th class="px-3 py-2 text-left">金额</th>
              <th class="px-3 py-2 text-left">时间</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="record in selectedCompany.recentTransactions" :key="record.id" class="border-t border-gray-200">
              <td class="px-3 py-2">{{ record.id }}</td>
              <td class="px-3 py-2">{{ record.counterparty }}</td>
              <td class="px-3 py-2">{{ record.amount }}</td>
              <td class="px-3 py-2">¥{{ record.money.toFixed(2) }}</td>
              <td class="px-3 py-2">{{ record.time }}</td>
            </tr>
            <tr v-if="selectedCompany.recentTransactions.length === 0">
              <td colspan="5" class="px-3 py-4 text-center text-gray-500">暂无交易记录</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 厂商数据
const companies = ref([
  {
    id: 1,
    name: "绿色能源科技",
    logo: "https://picsum.photos/id/1025/40/40",
    industry: "能源",
    contactPerson: "张明",
    phone: "13800138000",
    email: "contact@greenenergy.com",
    address: "北京市海淀区科技园路88号",
    credits: 12500,
    price: 58.6,
    regDate: "2023-01-15",
    active: true,
    description: "专注于清洁能源研发与生产的高新技术企业，致力于减少碳排放，推动绿色能源发展。",
    recentTransactions: [
      { id: 'TX20250908001', counterparty: '恒通制造', amount: 500, money: 29300, time: '2025-09-08 10:23' },
      { id: 'TX20250905032', counterparty: '南方电子', amount: 300, money: 17580, time: '2025-09-05 16:10' }
    ]
  },
  {
    id: 2,
    name: "蓝天制造集团",
    logo: "https://picsum.photos/id/1026/40/40",
    industry: "制造业",
    contactPerson: "李华",
    phone: "13900139000",
    email: "info@bluesky.com",
    address: "上海市浦东新区工业区12号",
    credits: 8340,
    price: 62.3,
    regDate: "2023-02-20",
    active: true,
    description: "采用环保生产工艺的制造企业，主要生产节能设备和环保材料，年减排量达10万吨。",
    recentTransactions: [
      { id: 'TX20250907055', counterparty: '华宇集团', amount: 1200, money: 74760, time: '2025-09-07 14:30' }
    ]
  },
  {
    id: 3,
    name: "清新化工有限公司",
    logo: "https://picsum.photos/id/1027/40/40",
    industry: "化工",
    contactPerson: "王芳",
    phone: "13700137000",
    email: "wangfang@freshchem.com",
    address: "广州市天河区化工路56号",
    credits: 5670,
    price: 55.8,
    regDate: "2023-03-10",
    active: false,
    description: "专注于绿色化工产品研发与生产，拥有多项环保专利技术，产品广泛应用于环保领域。",
    recentTransactions: []
  },
  {
    id: 4,
    name: "环保建材集团",
    logo: "https://picsum.photos/id/1028/40/40",
    industry: "建材",
    contactPerson: "赵强",
    phone: "13600136000",
    email: "zhaoqiang@ecobuild.com",
    address: "成都市高新区建材大道78号",
    credits: 9830,
    price: 60.2,
    regDate: "2023-04-05",
    active: true,
    description: "生产环保建筑材料的大型企业，产品包括节能保温材料、再生建材等，低碳环保。",
    recentTransactions: [
      { id: 'TX20250908002', counterparty: '东方化工', amount: 300, money: 18060, time: '2025-09-08 09:15' }
    ]
  },
  {
    id: 5,
    name: "可持续农业发展",
    logo: "https://picsum.photos/id/1029/40/40",
    industry: "农业",
    contactPerson: "陈静",
    phone: "13500135000",
    email: "chenjing@sustagri.com",
    address: "武汉市洪山区农业路23号",
    credits: 15600,
    price: 48.5,
    regDate: "2023-05-18",
    active: true,
    description: "推广可持续农业技术的企业，通过有机种植、循环农业等方式减少农业碳排放。",
    recentTransactions: [
      { id: 'TX20250907056', counterparty: '南方电子', amount: 800, money: 38800, time: '2025-09-07 16:42' }
    ]
  }
]);

// 搜索和筛选
const searchKeyword = ref('');
const filteredCompanies = computed(() => {
  return companies.value.filter(company =>
      company.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
  );
});

// 厂商弹窗相关
const showCompanyModal = ref(false);
const isEditing = ref(false);
const currentCompany = ref({
  id: null,
  name: '',
  logo: 'https://picsum.photos/id/1025/40/40',
  industry: '',
  contactPerson: '',
  phone: '',
  email: '',
  address: '',
  credits: 0,
  price: 0,
  regDate: new Date().toISOString().split('T')[0],
  active: true,
  description: '',
  recentTransactions: []
});

// 打开新增厂商弹窗
const openAddCompanyModal = () => {
  isEditing.value = false;
  currentCompany.value = {
    id: Date.now(),
    name: '',
    logo: 'https://picsum.photos/id/1025/40/40',
    industry: '',
    contactPerson: '',
    phone: '',
    email: '',
    address: '',
    credits: 0,
    price: 0,
    regDate: new Date().toISOString().split('T')[0],
    active: true,
    description: '',
    recentTransactions: []
  };
  showCompanyModal.value = true;
};

// 打开编辑厂商弹窗
const openEditCompanyModal = (company) => {
  isEditing.value = true;
  currentCompany.value = JSON.parse(JSON.stringify(company));
  showCompanyModal.value = true;
};

// 关闭厂商弹窗
const closeCompanyModal = () => {
  showCompanyModal.value = false;
};

// 保存厂商信息
const saveCompany = () => {
  if (isEditing.value) {
    // 编辑现有厂商
    const index = companies.value.findIndex(c => c.id === currentCompany.value.id);
    if (index !== -1) {
      companies.value[index] = currentCompany.value;
    }
  } else {
    // 添加新厂商
    companies.value.push(currentCompany.value);
  }
  showCompanyModal.value = false;
  alert(isEditing.value ? '厂商信息已更新' : '新厂商已添加');
};

// 切换厂商状态
const toggleCompanyStatus = (index) => {
  companies.value[index].active = !companies.value[index].active;
  alert(`厂商已${companies.value[index].active ? '启用' : '停用'}`);
};

// 厂商详情弹窗
const showCompanyDetailModal = ref(false);
const selectedCompany = ref({});

// 查看厂商详情
const viewCompanyDetails = (company) => {
  selectedCompany.value = company;
  showCompanyDetailModal.value = true;
};
</script>
